<html>
    <head>
        <title>自定义导航栏使用注意</title>
    </head>
    <bdoy>
        <script>
             /*
                一、自定义导航栏使用注意

                                1、非 H5 端，手机顶部状态栏会被页面内容覆盖。

                                        这是因为窗体是沉浸式的原因，即全屏可写内容。

                                        uni-app 提供了状态栏高度的css变量  --status-bar-height,

                                        如果需要把状态栏的位置从前景部分让出来，可写一个div占位，高度设置为 css变量：

                                        eg：

                                                <template>
                                                    <view>
                                                        <view class="status-bar">
                                                            !--这是状态栏---
                                                        </view>
                                                        <view>状态栏下的文字</view>
                                                    </view>
                                                </template>
                                                <style>
                                                    .status-bar{
                                                        height: var(--status-bar-height);
                                                        width:100%;
                                                    }
                                                </style>


                                2、如果原生导航栏不能满足需求，推荐使用 uni ui 的 "自定义导航栏NavBar" 。 这个前端导航栏自动处理了状态栏高度占位问题。

                                3、前端导航栏搭配原生下拉刷新时，会有问题，包括：

                                        ①、微信小程序下iOS需要拉更长才能看到下拉刷新的三个点，而Android是从屏幕顶部下拉，无法从导航栏下方下拉。
                                            
                                            如果一定要从前端导航栏下拉，小程序下只能放弃原生下拉刷新，纯前端模拟，参考mescroll插件，但这样很容易产生性能问题。目前小程序平台自身没有提供更好的方案

                                        ②、  App和H5下，原生下拉刷新提供了circle样式，可以指定offset偏移量（pages.json的app-plus下配置），自定义下拉圈出现的位置。在hello uni-app的扩展组件中有示例。

                                4、非H5端，前端导航盖不住原生组件。如果页面有video、map、textarea(仅小程序)等原生组件，滚动时会覆盖住导航
                                                
                                        ①、如果是小程序下，可以使用cover-view来做导航栏，避免覆盖问题

                                        ②、如果是App下，建议使用titleNView或subNVue，体验更好

                                5、前端组件在渲染速度上不如原生导航栏，原生导航可以在动画期间渲染，保证动画期间不白屏，但使用前端导航栏，在新窗体进入的动画期间可能会整页白屏，越低端的手机越明显。

                                6、以上讨论的是前端自定义导航栏，但在App侧，原生导航栏也提供了比小程序导航更丰富的自定义性

                                        ①、titleNView：给原生导航栏提供更多配置，包括自定义按钮、滚动渐变效果、搜索框等，详见titleNView

                                        ②、subNVue：使用nvue原生渲染，所有布局自己开发，具备一切自定义灵活度。详见subNVue

                                7、页面禁用原生导航栏后，想要改变状态栏的前景字体样式，仍可设置页面的 navigationBarTextStyle 属性（只能设置为 black或white）。
                                
                                    如果想单独设置状态栏颜色，App端可使用plus.navigator.setStatusBarStyle设置。注意部分低端Android手机（4.4）自身不支持设置状态栏前景色。

                        ★、总结：

                                    鉴于以上问题，在原生导航能解决业务需求的情况下，尽量使用原生导航。甚至优势需要牺牲一些不是很重要的需求。

                                    在 APP 和 H5 下， uni-app 提供了灵活的处理方案：  titleNView 和 subNVue  或者整页使用呢 nvue 。

                                    但在小程序下，因为自身而限制，没有太好的方案。有必要的话，也可以使用条件编译分端处理。
            */
        </script>
    </bdoy>
</html>